<template>
    <div class="peizi">
        <wrapper-content pageTitle="配资记录">
            <div class="data-content">
                <div class="table-edit">

                    <!--代理商-->
                    <span>代理商</span>
                    <Select v-model="agent" style="width:150px">
                        <Option v-for="item in agentList" :value="item.value" :key="item.value">{{ item.label }}
                        </Option>
                    </Select>
                    <!--配资类型-->
                    <span>配资类型</span>
                    <Select v-model="type" style="width:140px">
                        <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                    <!--配资倍数-->
                    <span>配资倍数</span>
                    <Select v-model="multiple" style="width:140px">
                        <Option v-for="item in multipleList" :value="item.value" :key="item.value">{{ item.label }}
                        </Option>
                    </Select>
                    <!--用户名-->
                    <span>用户名</span>
                    <Input v-model="username" placeholder="搜索" style="width:140px"/>
                    <!--日期-->
                    <DatePicker style="padding: 10px 0"
                                :open="open"
                                :value="search_date"
                                confirm
                                placement="bottom-end"
                                type="daterange"
                                @on-clear="dateClear"
                                @on-change="dateChange"
                                @on-ok="dateOk">
                        <a href="javascript:void(0)" class="c666" @click="dateClick">
                           <span>
                               <Icon type="calendar"></Icon>
                               <template><strong>{{ search_date_format }}</strong></template>
                           </span>
                        </a>
                    </DatePicker>
                    <Button type="info">查询</Button>
                </div>
                <Table :loading="loading" border :columns="columns" :data="user_list" class="no-border-table"
                       @on-selection-change="selectItem"></Table>
                <Page v-if="userCount > 0" :total="userCount" :current="page_num" @on-change="changePage"
                      @on-page-size-change="changePageSize" size="small" show-total class="table-page">
                    <slot class="total">共 {{ userCount }} 条</slot>
                </Page>
            </div>
        </wrapper-content>

        <transition name="router-slid">
            <router-view></router-view>
        </transition>
    </div>
</template>
<style>
    .c666 {
        color: #666;
    }
</style>
<script>
    import WrapperContent from '../../../components/wrapper-content.vue'
    import {
        getUserList,
        getUser,
        getLevelList,
        getPositionList,
        doUserInfo,
        delUser,
        changeUserState
    } from "@/api/user";
    import * as utils from '../../../assets/js/utils'
    import $ from 'jquery'
    import _ from 'lodash'

    export default {
        components: {
            WrapperContent,
        },
        data() {
            return {
                agentList: [],//代理商
                agent: '',
                typeList: [],//配资类型
                type: '',
                multipleList: [],//配资倍数
                multiple: '',
                username: '',//用户名
                search_date: [],
                open: false,
                page_size: 10,
                page_num: 1,
                keyword: '',
                loading: true,
                columns: [
                    {
                        title: '编号',
                        key: 'account',
                        render: (h, params) => {
                            return h('router-link', {
                                props: {
                                    to: '/team/user/detail/' + params.row.id
                                }
                            }, params.row.account)
                        }
                    },
                    {
                        title: '客户信息',
                        key: 'realname'
                    },
                    {
                        title: '配资类型',
                        key: 'realname'
                    },
                    {
                        title: '借款金额',
                        key: 'realname'
                    },
                    {
                        title: '保证金',
                        key: 'realname'
                    },
                    {
                        title: '借款利率',
                        key: 'realname'
                    },
                    {
                        title: '亏损警戒线',
                        key: 'realname'
                    },
                    {
                        title: '亏损平仓线',
                        key: 'realname'
                    },
                    {
                        title: '计费开始时间',
                        key: 'realname'
                    },
                    {
                        title: '计费结束时间',
                        key: 'realname'
                    },
                    {
                        title: '初次利息',
                        key: 'realname'
                    },
                    {
                        title: '递延次数',
                        key: 'realname'
                    },
                    {
                        title: '状态',
                        key: 'realname'
                    },
                    {
                        title: '是否结算',
                        key: 'realname'
                    },
                    {
                        title: '可用金额',
                        key: 'realname'
                    },
                    {
                        title: '总计利息',
                        key: 'realname'
                    },
                    {
                        title: '总佣金',
                        key: 'realname'
                    },
                    {
                        title: '结算总股票盈亏',
                        key: 'realname'
                    },
                    {
                        title: '代理总分成',
                        key: 'realname'
                    },
                    {
                        title: '其他分成',
                        key: 'realname'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        width: 150,
                        render: (h, params) => {
                            return h('div', [
                                h('i-button', {
                                    props: {
                                        type: 'ghost',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.$router.push('/configuration_management_log/stock/' + '1')/*params.row.id*/
                                        }
                                    }
                                }, '查看配资股票')
                            ])
                        }
                    }

                ],
                user_list: [{}],
                userCount: 0,
            }
        },
        computed: {
            search_date_format: function () {
                if (this.search_date.length > 0) {
                    return this.search_date[0] + '~' + this.search_date[1];
                } else {
                    return '选择筛选日期'
                }
            }
        },
        created: function () {
            this.loading = false;
            this.userCount = 10;
            /* this.getUserList();
             this.getLevelList();
             this.getPositionList()*/
        },
        methods: {
            dateClick() {
                this.open = !this.open;
            },
            dateChange(date) {
                this.search_date = date;
            },
            dateOk() {
                this.page_num = 1;
                // this.getList();
                this.open = false;
            },
            dateClear() {
                this.search_date = [];
            },

            getUserList() {
                let app = this;
                getUserList(this.page_size, this.page_num, this.keyword).then(res => {
                    app.loading = false;
                    app.user_list = res.data.list;
                    app.userCount = Number(res.data.count)
                });
            },
            selectItem(selection) {
                let app = this;
                app.select_users = [];
                /*  $.each(selection, function (k, v) {
                      app.select_users.push(v.id)
                  });*/
            },
            changePage(page) {
                this.page_num = page;
                this.getUserList()
            },
            changePageSize(page_size) {
                this.page_num = 1;
                this.page_size = page_size;
                this.getUserList()
            },
        }
    }
</script>
